<template>
  <el-dialog title="添加图层" :visible.sync="dialogVisible" width="35%" :before-close="handleClose" :close-on-click-modal="false">
    <div class="j-new-layers-body">
        <el-form ref="form" label-position="right" label-width="80px" size="small">
          <el-form-item label="图层标题">
            <el-input v-model="layers.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="图层名称">
            <el-input v-model="layers.name" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="布局类型">
            <el-select v-model="layers.attribute.type" placeholder="请选择活动区域">
              <el-option label="flex" value="flex"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设置列">
            <el-input-number v-model="colNum" :min="1" :max="24"></el-input-number>
          </el-form-item>
          <el-form-item label="栅格间隔">
            <el-input-number v-model="layers.attribute.gutter" :min="1" :max="24"></el-input-number>
          </el-form-item>
          <el-form-item label="水平排列">
            <el-select v-model="layers.attribute.justify" placeholder="请选择活动区域">
              <el-option label="start" value="start"></el-option>
              <el-option label="end" value="end"></el-option>
              <el-option label="center" value="center"></el-option>
              <el-option label="space-around" value="space-around"></el-option>
              <el-option label="space-between" value="space-between"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="布局排列">
            <el-select v-model="layers.attribute.align" placeholder="请选择活动区域">
              <el-option label="top" value="top"></el-option>
              <el-option label="middle" value="middle"></el-option>
              <el-option label="bottom" value="bottom"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设置高度">
            <el-input-number v-model="layers.attribute.height" :min="1" :max="1200"></el-input-number>
          </el-form-item>
        </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      <el-button type="primary" size="small" @click="handleAffirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script type="text/javascript">
import layerAttribute from '../layer-attribute'
import gridAttribute from '../grid-attribute'
export default {
  props: {
    value: [Array, Object, Number, String]
  },
  data() {
    return {
        colNum:1,

        dialogVisible:false,
        layers:{
          title:'',
          name:'',
          handle: layerAttribute,
          attribute:{
            type: "flex", //布局类型
            gutter: 0,
            justify: "start",
            align: "top",
            tag: "div",
            height: "100px", //默认高度
            row: 1, //多少列
            col: []
          }
        }
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
      // models:function(argument){
      //   return this.value.models
      // }
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
  
  },
  methods: {
    /**
     * 关闭弹窗
     * @return {[type]} [description]
     */
    handleClose(){
      this.dialogVisible=false;
    },

    /**
     * 添加图层
     * @return {[type]} [description]
     */
    handleAffirm(){
      let col = {
        handle: gridAttribute,
        attribute: {
          span: 24,
          offset: 0,
          push: 0,
          pull: 0,
          tag: "div",
        },
        components: {
          handle: "",
          attribute: {}
        }
      }

      col.attribute.span = 24 / this.colNum;

      this.layers.attribute.col = [];
      for(var i = 0 ; i < this.colNum ; i++){
        this.layers.attribute.col.push(col)
      }
      this.value.models.push(this.layers);
      this.dialogVisible = false;
    },

  }
}

</script>
<style type="text/css" lang="scss">
</style>
